<style>
    .layui-form-pane .layui-form-label{width:auto;}
    .layui-form-item{margin-bottom: 0px;}

    .input-readonly{background-color:#eee;}
    .layui-table td, .layui-table th{padding:6px 8px;}
</style>
<div class="layui-tab layui-tab-brief" lay-filter="test1">
    <ul class="layui-tab-title">
        <li class="layui-this"  lay-id="0" >选择物料+</li>
        <li lay-id="1">新建</li>
    </ul>
    <div class="layui-tab-content"></div>
</div>
<div class="layui-tab-item layui-show" id="tab_content_1">
<div class="fixed-bar">
    <form class="layui-form layui-form-pane fixed-bar-form" action="{:url()}" method="get" id="hisi-table-search">
        <div class="layui-form-item">

            <div class="layui-inline">
                <label class="layui-form-label">物料名称</label>
                <div class="layui-input-inline">
                    <input type="text" name="name" lay-verify="" placeholder="输入物料名称" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">物料SKU</label>
                <div class="layui-input-inline">
                    <input type="text" name="material_sku" lay-verify="" placeholder="输入物料SKU" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">颜色</label>
                <div class="layui-input-inline">
                    <input type="text" name="color" lay-verify="" placeholder="输入物料颜色" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">订单号</label>
                <div class="layui-input-inline">
                    <input type="text" name="client_ordernum" lay-verify="" placeholder="输入订单号" class="layui-input">
                </div>
            </div>
            {if env('env_site') == 'riwei' }
            <div class="layui-inline">
                <label class="layui-form-label">客户单号</label>
                <div class="layui-input-inline">
                    <input type="text" name="ext_id" lay-verify="" placeholder="输入客户单号" class="layui-input">
                </div>
            </div>
            {/if}

            <div class="layui-inline">
                <label class="layui-form-label">产品SKU</label>
                <div class="layui-input-inline">
                    <input type="text" name="sku" lay-verify="" placeholder="输入产品SKU" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">供应商</label>
                <div class="layui-input-inline">
                    <input type="text" name="supplier" lay-verify="" placeholder="输入供应商" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">搜索</button>
            </div>
        </div>
    </form>
</div>

<table id="dataTable"></table>
</div>

<div class="layui-tab-item layui-hide" id="tab_content_2">
    <form class="layui-form" action="{:url()}" method="post" id="editForm">
        <div class="layui-form-item">
        {:FormExt::setInline()}
            <div class="layui-inline upload" style="width:280px; padding-left:30px;">
                <button type="button" name="upload" class="layui-btn layui-btn-primary layui-upload" lay-type="image" lay-data="{exts:'jpg|png|gif|bmp|jpeg', accept:'images'}">请上传产品图</button>
                <input type="hidden" class="upload-input" name="pic" value="{:arrayGet($formData, 'pic', '')}">
                {if condition="arrayGet($formData, 'pic', '') != ''"}
                <img src="{:arrayGet($formData, 'pic', '')}" style="display:inline-block;border-radius:5px;border:1px solid #ccc" width="36" height="36">
                {else /}
                <img src="" style="display:none;border-radius:5px;border:1px solid #ccc" width="36" height="36">
                {/if}
            </div>
            {:FormExt::input('物料SKU', 'name', '', '请输入物料SKU', 'required', 'lay-verify="required"')}
        {:FormExt::input('物料名称', 'name', '', '请输入物料名称', 'required', 'lay-verify="required"')}
            {:FormExt::input('采购批号', 'name', '', '请输入采购批号', 'required', 'lay-verify="required"')}
            {:FormExt::input('物料属性', 'name', '', '请输入物料属性', 'required', 'lay-verify="required"')}
            {:FormExt::input('物料类型', 'name', '', '请输入物料类型', 'required', 'lay-verify="required"')}
            {:FormExt::input('单价', 'name', '', '请输入单价', 'required', 'lay-verify="required"')}
            {:FormExt::input('色号', 'name', '', '请输入色号', 'required', 'lay-verify="required"')}
            {:FormExt::input('颜色', 'name', '', '请输入颜色', 'required', 'lay-verify="required"')}
            {:FormExt::input('还需用量（采购用户量/米）', 'name', '', '', 'required', 'lay-verify="required"')}

            {:FormExt::input('型号', 'name', '', '非必填', '', '')}
            {:FormExt::input('供应商', 'name', '', '非必填', '', '')}
            {:FormExt::input('联系方式', 'name', '', '非必填', '', '')}
            {:FormExt::input('地址', 'name', '', '非必填', '', '')}

        </div>
<div class="pop-bottom-bar">
    <button type="submit" class="layui-btn layui-btn-normal" lay-submit="" lay-filter="formSubmit" hisi-data="{pop: true, refresh: true}">提交保存</button>
    <a href="javascript:parent.layui.layer.closeAll();" class="layui-btn layui-btn-primary ml10">取消</a>
</div>
</form>
</div>

<div class="layui-tab-item layui-hide" id="tab_content_3">
</div>

{include file="system@block/layui" /}


<script type="text/html" title="操作按钮模板" id="buttonTpl">
    <a href="javascript:;" onclick="select_this_material(this,{{ d.id }})" class="layui-btn layui-btn-xs">选择</a>
</script>
<script type="text/html" id="useOrders">
    {{ d.use_orders_30d }} /
    {{# if(d.use_orders > 0){ }}
    <a href="{:url('history')}?id={{ d.id }}" class="hisi-iframe blue" title="使用产品记录">{{ d.use_orders }}</a>
    {{# }else{ }}
    0
    {{# } }}
</script>
<script type="text/html" id="useTimeTpl">
    <div>{{layui.util.toDateString(d.use_time * 1000) }}</div>
</script>
<script type="text/html" id="addCaigouTpl">
    <form class="layui-form" action="{:url()}" method="post" id="editForm_addCaigou">
    <table class="layui-table ">
        <thead>
        <tr>
            <th>物料属性</th>
            <th>图片</th>
            <th>采购批号</th>
            <th>物料名称</th>
            <th>物料SKU</th>

            <th>供应商</th>
            <th>型号</th>
            <th>色号</th>
            <th>颜色</th>
            <th>单位</th>

            <th>单价</th>
            <th>联系方式</th>
            <th>地址</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>常规</td>
            <td>
                <span class="lay-pic-container" src="{{ d.pic }}">
                    <img src="{{ d.ori_pic }}" class="lay-pic">
                </span>
            </td>
            <td></td>
            <td>{{ d.name }}</td>
            <td>{{ d.material_sku }}</td>

            <td>{{ d.supplier }}</td>
            <td>{{ d.model }}</td>
            <td>{{ d.colornum }}</td>
            <td>{{ d.color }}</td>
            <td>{{ d.purchasing_unit }}</td>

            <td>{{ d.price }}</td>
            <td>{{ d.contact }}</td>
            <td>{{ d.address }}</td>
        </tr>
        </tbody>
    </table>
        <div class="layui-form-item">
    {:FormExt::input('还需用量（采购用户量/米）', 'name', '', '', 'required', 'lay-verify="required"')}
        </div>
        <div class="pop-bottom-bar">
            <button type="submit" class="layui-btn layui-btn-normal" lay-submit="" lay-filter="formSubmit" hisi-data="{pop: true, refresh: true}">提交保存</button>
            <a href="javascript:parent.layui.layer.closeAll();" class="layui-btn layui-btn-primary ml10">取消</a>
        </div>
    </form>
</script>
<script src="__PUBLIC_JS__/jquery.2.1.4.min.js?v={:config('hisiphp.version')}"></script>
<script src="__PUBLIC_JS__/xm-select/dist/xm-select.js?v={:config('hisiphp.version')}"></script>
<script src="__PUBLIC_JS__/vue@3.2.26/dist/vue.global.js"></script>
<script type="text/javascript">
    var now_data={};
    layui.use(['table', 'tool','element'], function() {
        var table = layui.table;
        var element=layui.element;
        table.render({
            elem: '#dataTable'
            ,url: '{:url()}' //数据接口
            ,page: true //开启分页
            ,skin: 'row'
            ,even: true
            ,limit: 20
            ,limits: [20,50,100,150,200]
            ,text: {
                none : '暂无相关数据'
            }
            ,toolbar: '#toolbar'
            ,defaultToolbar: ['filter', 'exports', 'print']
            ,cols: [[ //表头
                {field: 'id', title: '编号',width: 80}
                ,{field: 'name', title: '物料名称',width: 180, templet:function(d){return layui.tool.formatMaterialType(d.type, '', 2)+'<span class="copy-item">'+d.name+'</span>';}}
                ,{field: 'material_sku', title: '物料SKU',width: 150, templet:function(d){return '<span class="copy-item">'+d.material_sku+'</span>';}}
                ,{field: 'supplier', title: '供应商',width: 100, templet:function(d){return '<span class="copy-item">'+d.supplier+'</span>';}}
                ,{field: 'model', title: '型号',width: 100}
                ,{field: 'colornum', title: '色号',width: 80}
                ,{field: 'color', title: '颜色',width: 80}
                ,{field: 'purchasing_unit', title: '单位',width: 60}
                ,{field: 'price', title: '单价',width: 80}
                ,{field: 'contact', title: '联系方式',width: 120, templet:function(d){return '<span class="copy-item">'+d.contact+'</span>';}}
                ,{field: 'address', title: '地址',width: 100}
                ,{field: 'need_checkcloth', title: '验布',width: 80, templet:function(d){return layui.tool.formatBool(d.need_checkcloth)}}
                ,{field: 'need_shrink', title: '缩水',width: 80, templet:function(d){return layui.tool.formatBool(d.need_shrink)}}
                ,{field: 'use_orders', title: '常用产品数',width: 100, templet: '#useOrders'}
                ,{field: 'use_time', title: '最近使用时间', templet: '#useTimeTpl',width: 150}
                ,{field: '', title: '操作', templet: '#buttonTpl', fixed: 'right',width: 150}
            ]]
            ,done: function(res, curr, count){
                now_data=res;
            }
        });

        //监听Tab切换，以改变地址hash值
        element.on('tab(test1)', function(){
            var id=this.getAttribute('lay-id');
            showTab(id);
        });
    });

    function select_this_material(obj,id) {
        var laytpl = layui.laytpl;
        $.ajax({
            type: "POST",
            url: "{:url('mp/PurchasingV2/getCaigouMaterialInfo')}",
            data: {material_id:id} ,
            dataType:"json",
            success: function(res){
                if (res.code == 0) {
                    var content = laytpl($('#addCaigouTpl').html()).render(res.data);
                    $('#tab_content_3').html(content);
                    showTab(2);
                } else {
                    layer.msg(res.msg, {icon: 2,anim: 6});
                }
            }
        });
    }

    function showTab(id=0) {
        $('.layui-tab-item').removeClass('layui-show');
        $('.layui-tab-item').addClass('layui-hide');
        $('.layui-tab-item:eq('+id+')').removeClass('layui-hide');
        $('.layui-tab-item:eq('+id+')').addClass('layui-show');
    }
</script>